<template>
  <div id="cart_item">
    <div class="swiper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <!-- for循环图片 -->
        <div class="swiper-slide" :key="banner" v-for="banner in carouselArr">
          <router-link to="/home">
            <img :src="banner" />
          </router-link>
        </div>
        <!-- 小圆点 -->
        <div class="swiper-pagination" slot="pagination"></div>
        <!-- 要是用对应版本的的navigation -->
        <!-- 左右切换 -->
        <div class="swiper-button-prev" slot="button-prev" @click="next"></div>
        <div class="swiper-button-next" slot="button-next" @click="prev"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
// import style (<= Swiper 5.x)
import "swiper/css/swiper.css";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  data() {
    return {
      carouselArr: [
        "http://p1.music.126.net/DvpZh3dshTbun5nHhK_R6A==/109951165763452410.jpg?imageView&quality=89",
        "http://p1.music.126.net/mdyZSQSwdKb-qF7lGNHJrA==/109951165763459418.jpg?imageView&quality=89",
        "http://p1.music.126.net/orQYXdNejEIv8GBjbODcmw==/109951165763558692.jpg?imageView&quality=89",
        "http://p1.music.126.net/tA_M4v2nwEivLXnwXAnaNA==/109951165764637858.jpg?imageView&quality=89",
        "http://p1.music.126.net/T3UuzMVUazsBZnJuMHQarw==/109951165763668851.jpg?imageView&quality=89",
      ],
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
          hideOnClick: true,
        },
        loop: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // effect: "fade",
        // 键盘左右键可以操控
        keyboard: true,
        // 鼠标的滚轮可以控制否
        mousewheel: true,
        touchRatio: 0.5, //触摸变慢
      },
    };
  },

  methods: {
    prev() {
      this.swiper.slidePrev();
    },
    next() {
      this.swiper.slideNext();
    },
  },
};
</script>
<style scoped lang='scss'>
#cart_item {
  background: black;
  height: 100vh;
  .swiper {
    margin: 0 auto;
    width: 1080px;
    .swiper-container {
      --swiper-pagination-color: #fff; /* 两种都可以 */
      --swiper-navigation-color: rgba(
        255,
        255,
        255,
        0.5
      ); /* 单独navi按钮颜色 */
      --swiper-navigation-size: 44px; /* 设置按钮大小 */
    }
  }
}
</style>